<template>
	<view>
		<view class="scroll-content">
			<!-- <view class="call-title">
				<text>{{workerName}}</text>
			</view> -->
			<view class="select-content">
				<u-input :placeholder="workerName" disabled disabledColor="#ffffff" placeholderStyle="color: #666">
					<template #suffix>
						<!-- <u-icon name="arrow-right"></u-icon> -->
					</template>
				</u-input>

				<u-input :placeholder="calltypeName" disabled disabledColor="#ffffff" placeholderStyle="color: #666"
					@click="calltypeShow = true">
					<template #suffix>
						<u-icon name="arrow-right"></u-icon>
					</template>
				</u-input>

				<u-input :placeholder="processName" disabled disabledColor="#ffffff" placeholderStyle="color: #666"
					@click="processShow = true">
					<template #suffix>
						<u-icon name="arrow-right"></u-icon>
					</template>
				</u-input>


				<u-input :placeholder="equipmentName" disabled disabledColor="#ffffff" placeholderStyle="color: #666"
					@click="equipmentShow = true">
					<template #suffix>
						<u-icon name="arrow-right"></u-icon>
					</template>
				</u-input>

				<u-input v-if="stopTypeList.length > 0 && stopTypeList[0].length > 0" :placeholder="stopTypeName"
					disabled disabledColor="#ffffff" placeholderStyle="color: #666" @click="stopTypeShow = true">
					<template #suffix>
						<u-icon name="arrow-right"></u-icon>
					</template>
				</u-input>

				<u-input v-if="stopReasonList.length > 0 && stopReasonList[0].length > 0" :placeholder="stopReasonName"
					disabled disabledColor="#ffffff" placeholderStyle="color: #666" @click="stopReasonShow = true">
					<template #suffix>
						<u-icon name="arrow-right"></u-icon>
					</template>
				</u-input>

				<u-input v-if="andinspectionList.length > 0 && andinspectionList[0].length > 0"
					:placeholder="andinspectionName" disabled disabledColor="#ffffff" placeholderStyle="color: #666"
					@click="andinspectionShow = true">
					<template #suffix>
						<u-icon name="arrow-right"></u-icon>
					</template>
				</u-input>
			</view>

			<view class="upload-content">
				<view class="upload-title">
					<text>图片上传</text>
					<!-- <text>1/4</text> -->
				</view>
				<upload-image @fileChange="getImages" :list="fileList" :capture="capture"></upload-image>

			</view>
			<view class="call-content">
				<view class="call-title">
					<text>呼叫记录</text>
				</view>

				<view>
					<view margin="0" class="card" v-for="item in pageDataList">
						<view class="call-header">
							<!-- 							<view class="left">
								<img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" alt=""
									srcset="" width="35px" />
							</view> -->
							<view class="top">
								<view class="title">{{item.workCenterCode}}-{{item.workCenterName}}</view>
								<text class="pic" @click="getdetailinfo(item.id)">图片</text>
							</view>
							<view class="bottom">
								<view class="des">{{item.processName}}</view>
								<text style="color: orange;"> {{item.callStateName}}</text>
							</view>
						</view>
						<view class="call-detail">
							<text class="detail-title">呼叫类型</text>
							<text class="detail-title">呼叫时长</text>
							<text class="detail-title">呼叫时间</text>
							<!-- <text class="detail-title">呼叫状态</text> -->
							<text class="detail-text fail">{{item.callTypeName}}</text>
							<text class="detail-text">{{item.callmins}}min</text>
							<text class="detail-text">{{item.createTime}}</text>
							<!-- <text class="detail-text-time">{{item.callStateName}}</text> -->
						</view>
						<view class="detail-button" v-if="item.operateSetting == 2">
							<view class="cancel" @click="changeCallState(item,2)">取消</view>
							<view class="complete" @click="changeCallState(item,9)">复工</view>
						</view>
						<view class="detail-button" v-else>
							<view class="cancel" v-if="item.callState == 1" @click="changeCallState(item,2)">取消</view>
							<view class="daoda" v-if="item.callState == 3" @click="changeCallState(item,4)">到达</view>

							<view class="daoda" v-if="item.callState == 5" @click="changeCallState(item,6)">维修完成</view>
							<view class="complete" v-if="item.callState == 8" @click="changeCallState(item,9)">复工</view>
							<view class="complete" v-if="item.callState == 6" @click="changeCallState(item,7)">呼叫质量确认
							</view>
							<view class="complete" v-if="item.callState == 7" @click="changeCallState(item,8)">质量确认完成
							</view>
							<view class="daoda" v-if="item.callState > 4 &&item.callState < 6"
								@click="changeCallState(item,10)">挂起</view>
							<view class="close" v-if="item.callState >= 3" @click="changeCallState(item,11)">关闭</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="call-button">
			<u-button type="info" :disabled="resumptionWorkLoading" :text="resumptionWorkLoading?'复工中...':'复工'"
				class="work" @click="resumptionWorkDebounce"></u-button>
			<u-button type="primary" :disabled="submitDataLoading" :text="submitDataLoading?'呼叫中...':'呼叫'"
				@click="submitDataDebounce"></u-button>
		</view>
		<u-picker :show="workerShow" :columns="userWokers" keyName="workshopName" immediateChange
			@cancel="workerShow = false" @confirm="workCenterSelect"></u-picker>

		<u-picker :show="processShow" :columns="processList" keyName="processName" immediateChange
			@cancel="processShow = false" @confirm="processSelect"></u-picker>

		<u-picker :show="stopTypeShow" :columns="stopTypeList" keyName="stopTypeName" immediateChange
			@cancel="stopTypeShow = false" @confirm="stopTypeSelect"></u-picker>

		<u-picker :show="stopReasonShow" :columns="stopReasonList" keyName="stopReasonName" immediateChange
			@cancel="stopReasonShow = false" @confirm="stopReasonSelect"></u-picker>

		<u-picker :show="andinspectionShow" :columns="andinspectionList" keyName="inspectionTypeName" immediateChange
			@cancel="andinspectionShow = false" @confirm="andinspectionSelect"></u-picker>

		<u-picker :show="equipmentShow" :columns="equipmentList" keyName="equipmentName" immediateChange
			@cancel="equipmentShow = false" @confirm="equipmentSelect"></u-picker>

		<u-picker :show="calltypeShow" :columns="calltypeList" keyName="callTypeName" immediateChange
			@cancel="calltypeShow = false" @confirm="calltypeSelect"></u-picker>


	</view>
</template>

<script lang="ts" setup>
	import { onMounted, ref, reactive, onUnmounted } from 'vue';
	import { useMenuStore } from '@/stores/useMenuStore';
	import { onShow, onHide, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
	import { jsonString } from '../../uni_modules/uview-plus/libs/function/test';
	const { safeAreaInsets } = uni.getSystemInfoSync();
	import { http } from '@/utils/http';
	import { PageResult } from '@/types/type';
	import UploadImage from '@/components/upload-image.vue';

	const imagess = ref(['https://cdn.uviewui.com/uview/album/1.jpg', 'https://cdn.uviewui.com/uview/album/1.jpg']);

	function previewImage(index) {
		uni.previewImage({
			current: index, // 当前显示图片索引
			urls: imagess.value // 需要预览的图片http链接列表
		});
	}
	const click1 = () => {
		// 点击事件处理逻辑
	};

	// 触底监听
	onReachBottom(() => {
		console.log(1111111111)
		console.log("上拉加载")
	})

	onPullDownRefresh(() => {
		console.log("下拉刷新")
		setTimeout(() => {
			uni.stopPullDownRefresh()
		}, 1000)
	})

	import {
		getUserWokers,
		getUserWoker,
		getMesprocessList,
		getAndstoptypeList,
		getAndstopreasonList,
		getAndinspectiontypeList,
		saveAndcall,
		getCrewEquipmentList,
		queryCallTypeForPlant,
		getCallListByPage,
		updateCallState,
		resumptionCallWork,
		getinfo
	} from '@/api/andon'


	//菜单展示控制
	const show = ref(false);
	//菜单标题
	const showTitle = ref('');

	//文件列表
	const fileList = ref([]);

	// 获取工作中心列表
	const userWokers = reactive([]);
	const workerShow = ref(false);
	const workerName = ref("请选择工作中心");
	const workerId = ref("");

	// 工作中心选择
	async function workCenterSelect(e) {
		if (e.value.length == 0) {
			workerName.value = "请选择工作中心"
			workerId.value = ""

			processList[0] = []
			processName.value = "请选择工序";
			processId.value = ""
		} else {
			let item = e.value[0]
			if (item.id != workerId.value) {
				workerName.value = item.workshopName
				workerId.value = item.id

				processList[0] = []
				const { data } = await getMesprocessList({ workCenterId: item.id, enabled: 1 })
				processList[0] = data

				processName.value = "请选择工序";
				processId.value = ""
			}
		}

		workerShow.value = false
	}

	// 工序选择
	const processList = reactive([]);
	const processShow = ref(false);
	const processName = ref("请选择工序");
	const processId = ref("");


	// 工序确认选择
	async function processSelect(e) {
		if (processList.length == 0 || processList[0].length == 0 || e.value.length == 0) {
			processName.value = "请选择工序"
			processId.value = ""
		} else {
			let item = e.value[0]
			processName.value = item.processName
			processId.value = item.id
		}

		processShow.value = false
	}

	// 停机类型
	const stopTypeList = reactive([]);
	const stopTypeShow = ref(false);
	const stopTypeName = ref("请选择停机类型");
	const stopTypeId = ref("");

	// 停机类型
	async function stopTypeSelect(e) {
		let item = e.value[0]
		if (item.id != stopTypeId.value) {
			stopTypeName.value = item.stopTypeName
			stopTypeId.value = item.id

			// 停机原因
			stopReasonName.value = "请选择停机原因"
			stopReasonId.value = ""

			// 停机原因获取
			stopReasonList[0] = []
			const { data } = await getAndstopreasonList({ stopType: item.id, enabled: 1 })
			stopReasonList[0] = data

			// 报检类型
			andinspectionList[0] = []
			andinspectionName.value = "请选择报检类型"
			andinspectionId.value = ""
			const retdata = await getAndinspectiontypeList({ stopType: item.id, enabled: 1 })
			andinspectionList[0] = retdata.data

		}

		stopTypeShow.value = false
	}

	// 停机原因
	const stopReasonList = reactive([]);
	const stopReasonShow = ref(false);
	const stopReasonName = ref("请选择停机原因");
	const stopReasonId = ref("");

	function stopReasonSelect(e) {
		if (stopReasonList.length == 0 || stopReasonList[0].length == 0 || e.value.length == 0) {
			stopReasonName.value = "请选择停机原因"
			stopReasonId.value = ""
		} else {
			let item = e.value[0]
			stopReasonName.value = item.stopReasonName
			stopReasonId.value = item.id
		}
		stopReasonShow.value = false
	}


	// 报检类型
	const andinspectionList = reactive([]);
	const andinspectionShow = ref(false);
	const andinspectionName = ref("请选择报检类型");
	const andinspectionId = ref("");

	async function andinspectionSelect(e) {
		if (andinspectionList.length == 0 || andinspectionList[0].length == 0 || e.value.length == 0) {
			andinspectionName.value = "请选择报检类型"
			andinspectionName.value = ""
		} else {
			let item = e.value[0]
			if (item.id != workerId.value) {
				andinspectionName.value = item.inspectionTypeName
				andinspectionId.value = item.id
			}
		}
		andinspectionShow.value = false
	}


	// 设备
	const equipmentList = reactive([]);
	const equipmentShow = ref(false);
	const equipmentName = ref("请选择设备");
	const equipmentId = ref("");

	// 摄像头参数设置
	const capture = ref()
	onShow(async () => {
		// 照相机功能
		uni.getSystemInfo({
			success: function (info) {
				if (info?.camera) {
					// 有摄像头的操作
					capture.value = ['album', 'camera']
				} else {
					// 没有摄像头的操作
					capture.value = 'album'
				}
			}
		});
		const { code, data, message } = await getUserWoker()
		if (code != 200) {
			uni.$u.toast(message, 3000);
			uni.switchTab({
				url: '/pages/index/index'
			})
			return;
		}
		workerName.value = data.workshopCode + '-' + data.workshopName
		processList[0] = data.processList
		workerId.value = data.id
		// getandUserWokers()
		getCrewEquipments()
		queryCallTypesForPlant()
		getCallDataListByPage()

		intervalwork.value = setInterval(function () {
			getCallDataListByPage()
		}, 60000);
	})

	async function queryCallTypesForPlant() {

		const { data } = await queryCallTypeForPlant()
		calltypeList[0] = data
	}

	function equipmentSelect(e) {
		if (equipmentList.length == 0 || equipmentList[0].length == 0 || e.value.length == 0) {
			equipmentName.value = "请选择设备"
			equipmentId.value = ""
		} else {
			let item = e.value[0]
			if (item.id != workerId.value) {
				equipmentName.value = item.equipmentName
				equipmentId.value = item.id
			}
		}
		equipmentShow.value = false
	}

	// 呼叫类型
	const calltypeList = reactive([]);
	const calltypeShow = ref(false);
	const calltypeName = ref("请选择呼叫类型");
	const calltypeId = ref("");

	function calltypeSelect(e) {
		if (calltypeList.length == 0 || calltypeList[0].length == 0 || e.value.length == 0) {
			calltypeName.value = "请选择呼叫类型"
			calltypeId.value = ""
		} else {
			let item = e.value[0]
			if (item.id != workerId.value) {
				calltypeName.value = item.callTypeName
				calltypeId.value = item.id
			}
			stopTypeList[0] = []
			stopTypeName.value = "请选择停机类型";
			stopTypeId.value = "";

			andinspectionList[0] = []
			andinspectionName.value = "请选择报检类型"
			andinspectionName.value = ""

			getAndstoptypes()
		}
		calltypeShow.value = false
	}


	async function getandUserWokers() {
		const { data } = await getUserWokers()
		userWokers[0] = data
	}

	async function getAndstoptypes() {
		const { data } = await getAndstoptypeList({ callTypeId: calltypeId.value, enabled: 1 })
		stopTypeList[0] = data
	}

	async function getCrewEquipments() {
		const { data } = await getCrewEquipmentList()
		equipmentList[0] = data
	}

	// 函数防抖
	function debounce(func, delay = 200) {
		let timeoutId;
		return function () {
			clearTimeout(timeoutId);
			timeoutId = setTimeout(() => {
				func();
			}, delay);
		};
	}

	// 提交申请
	const submitDataLoading = ref(false)
	async function submitData() {

		if (!workerId.value) {
			uni.showToast({
				title: '请选择工作中心',
				icon: 'none'
			})
			return
		}

		if (!calltypeId.value) {
			uni.showToast({
				title: '请选择呼叫类型',
				icon: 'none'
			})
			return
		}

		if (!processId.value) {
			uni.showToast({
				title: '请选择工序',
				icon: 'none'
			})
			return
		}

		if (!equipmentId.value) {
			uni.showToast({
				title: '请选择设备',
				icon: 'none'
			})
			return
		}

		if (stopTypeList.length > 0 && stopTypeList[0].length > 0) {
			if (!stopTypeId.value) {
				uni.showToast({
					title: '请选择停机类型',
					icon: 'none'
				})
				return
			}

		}

		if (stopReasonList.length > 0 && stopReasonList[0].length > 0) {
			if (!stopReasonId.value) {
				uni.showToast({
					title: '请选择停机原因',
					icon: 'none'
				})
				return
			}
		}


		if (andinspectionList.length > 0 && andinspectionList[0].length > 0) {
			if (!andinspectionId.value) {
				uni.showToast({
					title: '请选择报检类型',
					icon: 'none'
				})
				return
			}
		}

		let saveData = {
			workCenterId: workerId.value,
			processId: processId.value,
			stopId: stopTypeId.value,
			equipmentId: equipmentId.value,
			stopReasonId: stopReasonId.value,
			inspectionTypeId: andinspectionId.value,
			imgaes: imgaeList.value,
			callTypeId: calltypeId.value,
			remarks: "",
		}

		submitDataLoading.value = true
		const redata = await saveAndcall(saveData)
		if (redata.code === 200) {
			uni.showToast({
				title: '操作成功',
				icon: 'none'
			})

			uni.redirectTo({
				url: "/pages/andon/index"
			})
		}
		submitDataLoading.value = false
	}
	const submitDataDebounce = debounce(submitData)

	const imgaeList = ref([])
	// 获取图片
	function getImages(list) {
		imgaeList.value = []
		list.forEach(item => {
			imgaeList.value.push(item.url)
		})
	}

	const searchPageData = reactive({
		current: 1,
		size: 20,
		data: {}
	})

	const total = ref(0);

	const pageDataList = ref([])


	// 查询呼叫记录
	async function getCallDataListByPage() {
		const { data } = await getCallListByPage(searchPageData)
		pageDataList.value = []
		pageDataList.value = data
	}

	// 修改状态
	async function changeCallState(item, code) {
		uni.showLoading({
			title: '加载中',
			mask: true,
		})
		const redata = await updateCallState({ id: item.id, callState: code })
		if (redata.code === 200) {
			uni.hideLoading()
			uni.showToast({
				title: '操作成功',
				icon: 'none'
			})

			uni.redirectTo({
				url: "/pages/andon/index"
			})
		}
	}

	const intervalwork = ref();

	onUnmounted(() => {
		clearInterval(intervalwork.value);
	})

	// 复工
	const resumptionWorkLoading = ref(false)
	async function resumptionWork() {
		resumptionWorkLoading.value = true
		const redata = await resumptionCallWork()
		if (redata.code === 200) {
			uni.showToast({
				title: '操作成功',
				icon: 'none'
			})

			uni.redirectTo({
				url: "/pages/andon/index"
			})
		}
		resumptionWorkLoading.value = false
	}
	const resumptionWorkDebounce = debounce(resumptionWork)

	async function getdetailinfo(id) {
		const redata = await getinfo(id)
		if (redata.data.imgaes.length == 0) {
			uni.showToast({
				title: '暂无图片',
				icon: 'none'
			})
		} else {
			imagess.value = redata.data.imgaes
			previewImage(0)
		}
		console.log(redata)
	}
</script>

<style>
	page {
		background-color: #fbfbff;
	}
</style>

<style lang="scss" scoped>
	.scroll-content {
		overflow: auto;
		box-sizing: border-box;
		padding: 20rpx 20rpx 0 20rpx;
		height: calc(100vh - 100rpx);

		.call-title {
			margin-bottom: 20rpx;
		}
	}

	.select-content {
		/*设置为grid网格布局*/
		width: 100%;
		display: grid;
		grid-template-rows: 38px 38px;
		grid-template-columns: 1fr 1fr;
		grid-gap: 20rpx;

		:deep(.u-input) {
			height: 34px;
			box-shadow: 0 1px 10px 0px rgba(19, 10, 236, 0.10);
			border: none;
			padding: 2px 7px !important;

			.u-input__content__field-wrapper__field {
				font-size: 13px !important;
				color: #16254e !important;
			}

			.u-icon__icon {
				font-size: 13px !important;
				line-height: 16px !important;
			}
		}
	}

	.upload-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: start;
		width: 100%;
		height: auto;

		.upload-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 34px;
			font-size: 24rpx;
			color: $uni-text-color-grey;
		}

		:deep(.u-upload__wrap) {
			.u-upload__wrap__preview {
				.u-upload__wrap__preview__image {
					width: 163rpx !important;
					height: 163rpx !important;
				}

				&:nth-child(4n) {
					margin-right: 0px !important;
				}
			}

			.u-upload__button {
				width: 163rpx !important;
				height: 163rpx !important;
			}
		}
	}

	.call-content {
		width: 100%;
		padding-bottom: 60px;

		.call-title {
			margin-top: 20rpx;
			margin-bottom: 20rpx;
		}

		.note {
			font-size: 24rpx;
			color: $uni-text-color-grey;
		}

		.call-detail {
			width: auto;
			padding: 30rpx;
			display: grid;
			grid-template-rows: 50rpx 50rpx;
			grid-template-columns: 1.1fr 1fr 2fr;
			grid-gap: 10rpx;

			.detail-title {
				color: $uni-text-color-grey;
				font-size: 26rpx;
			}

			.detail-text {
				font-size: 30rpx;
				font-weight: 400;
			}

			.detail-text-time {
				font-size: 25rpx;
				// font-weight: 600;
			}

			.fail {
				font-size: 30rpx;
				// color: $uni-color-warning;
			}
		}

		.detail-button {
			display: flex;
			border-top: 1px solid #eee;
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			padding: 20rpx 0;
			font-size: 30rpx;

			.cancel {
				width: 100%;
				color: $uni-text-color-grey;
				border-right: 1px solid #eee;
			}

			.close {
				width: 100%;
				color: $uni-color-error;
				border-right: 1px solid #eee;
				font-weight: 600;
			}

			.daoda {
				width: 100%;
				color: $uni-color-primary;
				border-right: 1px solid #eee;
			}

			.complete {
				width: 100%;
				color: $uni-color-primary;
			}
		}

		:deep(.view) {
			padding: 0 !important;
			margin-bottom: 20rpx !important;
		}

		:deep(.view__content) {
			padding: 0 !important;
		}
	}

	.call-button {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: center;
		background-color: transparent;

		:deep(.u-button) {
			height: 100%;
			border-radius: 0px;
		}

		.work {
			color: $uni-color-warning;
		}
	}

	.card {
		margin-top: 10px;
		padding: 0px;
		border-radius: 7px;
		transition: all 300ms ease;
		box-shadow: 0 2px 10px #ECF5FF;
		background-color: #fff;
	}

	.call-header {
		padding: 15px 12px 0 12px;
		// display: flex;

		.left {
			// flex-basis: 90rpx;
			text-align: center;
			font-size: 13px;
			color: rgba(0, 0, 0, 0.5);
		}

		.top {
			width: 100%;
			// height: 20px;
			display: flex;
			justify-content: space-between;

			.title {
				font-size: 30rpx;
				line-height: 20px;
				margin-bottom: 5px;
				display: block;
				max-width: 90%;
				// margin-left: 10px;
			}

			.pic {
				font-size: 26rpx;
				line-height: 18px;
				display: block;
				// margin-left: 10px;
				color: $uni-text-color-grey;
			}
		}

		.bottom {
			// flex-basis: 110rpx;
			text-align: center;
			font-size: 26rpx;
			// color: rgba(0, 0, 0, 0.5);
			display: flex;
			justify-content: space-between;
			margin-top: 10rpx;
		}
	}
</style>